<script lang="ts" setup="">
import draggable from '@/assets/utils/draggable'
import { getRandomId } from '@/assets/utils/utils'
import { defineProps, reactive, ref } from 'vue'
import useMainStore from '@/store'
import { message } from 'ant-design-vue'
import { CloseCircleOutlined } from '@ant-design/icons-vue'

const visible = defineProps()
const store = useMainStore()

const modalTitleRef = ref<HTMLElement | null>(null)
const transformStyle = draggable(modalTitleRef as unknown as HTMLElement)

const emit = defineEmits(['update:visible'])

function handle_addBtn() {
  addTodoList.data.push({ id: getRandomId(), title: '', checked: false })
}

function handle_addTodoList() {
  let result = addTodoList.data.some(item => {
    return !!item.title
  })
  if (!result) {
    message.error('请填写待办内容')
    return
  }
  store.todoList.push(...addTodoList.data)
  emit('update:visible', false)
  message.success('添加待办成功')
  addTodoList.data = [{ id: getRandomId(), title: '', checked: false }]
}

function handle_cancelClick() {
  emit('update:visible', false)
  addTodoList.data = [{ id: getRandomId(), title: '', checked: false }]
}

const handleDeleteItem = (id: number) => {
  const index = addTodoList.data.findIndex(todo => todo.id === id)
  if (index === -1) return
  addTodoList.data.splice(index, 1)
}

interface AddTodoList {
  data: { id: number; title: string; checked: boolean }[]
}
const addTodoList: AddTodoList = reactive({
  data: [{ id: getRandomId(), title: '', checked: false }]
})
</script>

<template>
  <a-modal
    v-model:visible="visible"
    cancel-text="添加"
    okText="确认"
    :wrap-style="{ overflow: 'hidden' }"
    @cancel="handle_cancelClick"
  >
    <a-list
      class="list"
      :data-source="addTodoList.data"
    >
      <template #renderItem="{ item, index }">
        <a-list-item class="list-item">
          <div class="content flex align-center">
            <close-circle-outlined
              :style="{ cursor: 'pointer' }"
              @click="handleDeleteItem(item.id)"
            />
            <label class="input-label ml-3">添加待办 {{ index }} ： </label>
            <a-input
              @pressEnter="handle_addBtn"
              v-model:value="item.title"
              show-count
              maxlength="20"
            />
          </div>
        </a-list-item>
      </template>
    </a-list>
    <template #title>
      <div
        class="modal-title"
        ref="modalTitleRef"
      >
        添加待办事项
      </div>
    </template>
    <template #modalRender="{ originVNode }">
      <div :style="transformStyle">
        <component :is="originVNode" />
      </div>
    </template>
    <template #footer>
      <a-button @click="handle_addBtn">添加</a-button>
      <a-button
        type="primary"
        @click="handle_addTodoList"
      >
        确认
      </a-button>
    </template>
  </a-modal>
</template>

<style lang="scss" scoped>
.list {
  max-height: 400px;
  overflow: hidden;
  overflow-y: scroll;

  & :deep(.ant-spin-nested-loading) {
    margin-right: 10px;
  }

  .list-item {
    position: relative;

    .close-btn {
      position: absolute;
      left: 0;
    }
  }

  .content {
    width: 100%;
  }

  &:deep(.ant-input-affix-wrapper) {
    width: 75%;
  }
}

.modal-title {
  width: 100%;
  cursor: move;
  color: #696969;
}
</style>
